<template>
  <input class="box" :class="{'box-bg':visible}" 
  type="text" @blur="a" @focus="b">
</template>

<script>
export default {
  data(){
      return{
          visible:true
      }
  },
   methods: {
       a(){
           this.visible=true
       },
       b(){
           this.visible=false
       }
   },
}
</script>

<style>
input{
    width: 10px;
    transition: all 1s;
}
.box{
    width: 1000px;
}
.box-bg{
    width: 10px;
}
</style>